<template>
  <div class="tiptap-menu" v-if="editorInstance">
    <div class="menu-group">
      <label for="title" class="label_title">《&nbsp;&nbsp; {{ nodeInfo.title }} &nbsp;&nbsp;》 </label>
    </div>

    <!-- <div class="menu-group">
      <shuatibotton />
    </div> -->
    <div class="menu-group">
      <wrongquestion/>
    </div>
    <div class="menu-group">
      <myquestion/>
    </div>
    <div class="menu-group">
      <div class="download-label">
        下载方式：
      </div>


      <el-icon @click="saveHTML" title="保存JSON" aria-label="保存JSON"  class="save-icon">
        <img src="@/assets/JSON.png" alt="保存JSON" style="width: 32px; height: 32px"/>
      </el-icon>

      <el-icon @click="saveHTML" title="保存TXT" aria-label="保存TXT"  class="save-icon">
        <img src="@/assets/TXT-t.png" alt="保存TXT" style="width: 32px; height: 32px"/>
      </el-icon>

      <el-icon @click="saveHTML" title="保存PDF" aria-label="保存PDF"  class="save-icon">
        <img src="@/assets/Pdf.png" alt="保存PDF" style="width: 32px; height: 32px"/>
      </el-icon>

      <el-icon @click="saveHTML" title="保存HTML" aria-label="保存HTML"  class="save-icon">
        <img src="@/assets/HTML-t.png" alt="保存HTML" style="width: 32px; height: 32px"/>
      </el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useEditorStore} from '@/stores/editStore';
import {storeToRefs} from 'pinia';
import {watch, ref, onMounted} from 'vue';
import {currentNodeInfo} from "@/stores/currentNodeStore";
import shuatibotton from '@/components/AI/StudentsExcise.vue';
import myquestion from '@/components/AI/myquestion/index.vue';
import wrongquestion from '@/components/AI/wrongquestion/index.vue';
import {SaveContentExtension} from '@/tiptap/extensions/SaveContentExtension'


const headingLevel = ref('');
const editorStore = useEditorStore();
const {editorInstance} = storeToRefs(editorStore);
const nodeInfo = currentNodeInfo()
const {isUpdate} = storeToRefs(nodeInfo);
// 设置标题的方法
const setHeading = () => {
  if (!editorInstance.value) return;

  const level = headingLevel.value;
  if (level) {
    editorInstance.value.chain().focus().toggleHeading({level: parseInt(level)}).run();
  } else {
    editorInstance.value.chain().focus().setParagraph().run();
  }
};

const saveJSON = () => {
  // editor.value?.commands.saveJSON();
  editorInstance.value?.commands.saveJSON();
};
const saveHTML = () => {
  editorInstance.value?.commands.saveHTML();
};
const saveText = () => {
  editorInstance.value?.commands.saveText();
};
const savePdf = () => {
  editorInstance.value?.commands.savePdf();
};

// 设置链接的方法


// 监听编辑器实例变化
watch(editorInstance, (newVal) => {
  if (newVal) {
    // 编辑器已准备好，可以执行操作
    console.log('编辑器已挂载，菜单组件已准备好');

    // 监听编辑器内容变化，更新标题级别状态
    editorInstance.value.on('transaction', () => {
      updateHeadingLevel();
    });
  }
});

// 更新标题级别状态
const updateHeadingLevel = () => {
  if (!editorInstance.value) return;

  for (let i = 1; i <= 3; i++) {
    if (editorInstance.value.isActive('heading', {level: i})) {
      headingLevel.value = i.toString();
      return;
    }
  }
  headingLevel.value = '';
};

// 组件挂载时初始化
onMounted(() => {
  if (editorInstance.value) {
    updateHeadingLevel();
  }
});
</script>

<style scoped>

.label_title{
  display: flex;
  flex: 1;
  /* width: 100px; */
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.download-label {
  color: white; /* 或者 #FFFFFF */
  /* font-weight: bold; */ /* 可选加粗 */
}
.save-icon {
  margin: 0 18px; /* 左右间距8px */
  cursor: pointer;
  transition: transform 0.2s;
}

.save-icon:hover {
  transform: scale(1.5);
}

.save-icon img {
  width: 32px;
  height: 32px;
  display: block;
}


.tiptap-menu {
  display: flex;
  /* flex-wrap: wrap; */
  text-align: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
  border-bottom: 1px solid #e0e0e0;
  /* 透明背景 */
  background-color: rgb(red, green, blue, 0);
  
}

.menu-group {
  display: flex;
  /* gap: 4px; */
  align-items: center;
  /* padding-right: 4px; */
  /* border-right: 1px solid #ddd; */
}

.menu-group:last-child {
  border-right: none;
}

button {
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
}

button:hover {
  background: #f0f0f0;
}

button.is-active {
  background: #e0e0e0;
  color: #333;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

select {
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
}

.editor {
  border: 1px solid #ccc;
  padding: 12px;
  min-height: 200px;
  margin-top: 12px;
}

::v-deep(.tiptap-comment) {
  background-color: rgba(255, 200, 0, 0.4);
  border-bottom: 1px dashed orange;
}
</style>
